<template>
  <div class="detail-item-body">
    <div class="title">
      <h3>实习经历</h3>
      <div class="edit-btn">
        <a-button icon="edit" class="edit-btn-item" @click="startEditJob()" />
        <a-button class="edit-btn-item" @click="edit(1)">{{
          this.editJobText
        }}</a-button>
      </div>
    </div>

    <div v-if="!isEditJob" class="job-item">
      <div class="company-info">
        <span class="company-title">{{
          this.field_company
        }}</span>
        <span >{{ this.field_time }}</span>
      </div>
      <p class="sub-title" >
        {{ this.field_job }}
      </p>

      <ul>
        <li>
          <p>{{ this.field_content }}</p>
        </li>
      </ul>
    </div>

    <div v-else class="job-item">
      <div class="company-info">
        <a-input class="company-title" v-model="field_company" />
        <a-input v-model="field_time" />
      </div>
      <a-input class="sub-title" v-model="field_job" />

      <ul>
        <li>
          <a-textarea :autoSize="{ minRows: 3, maxRows: 6 }" style="width: 385px;" v-model="this.field_content" />
        </li>
      </ul>
    </div>

    <p class="bottom-line"></p>

    <div class="title" style="margin-top: 16px">
      <h3>项目经历</h3>
      <div class="edit-btn">
        <a-button icon="edit" class="edit-btn-item" @click="startEditPro()" />
        <a-button class="edit-btn-item" @click="edit(2)">{{
          this.editProjectText
        }}</a-button>
      </div>
    </div>

    <div v-if="!isEditProject" class="job-item">
      <div class="company-info">
        <p :contenteditable="isEditProject" class="company-title">{{
          this.project_name
        }}</p>
        <span :contenteditable="isEditProject">{{ this.project_time }}</span>
      </div>
      <p class="sub-title">项目负责人</p>

      <ul>
        <li>
          <p :contenteditable="isEditProject">
            {{ this.project_content }}
          </p>
        </li>
      </ul>
    </div>

    <div v-else class="job-item">
      <div class="company-info">
        <a-input class="company-title" v-model="project_name" @onChange="editChange()" />
        <a-input v-model="project_time" />
      </div>

      <ul>
        <li>
          <a-textarea :autoSize="{ minRows: 3, maxRows: 6 }" style="width: 385px;" v-model="project_content" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from "@/utils/api";
import { Button, Icon, Input, TextArea } from "ant-design-vue";

export default {
  components: {
    "a-button": Button,
    "a-icon": Icon,
    "a-input": Input,
    "a-textarea": Input.TextArea,
  },
  data() {
    return {
      isEditJob: false,
      isEditProject: false,
      editJobText: "编辑",
      editProjectText: "编辑",
      field_company: '',
      field_job: '',
      field_time: '',
      project_name: '',
      field_content: '',
      project_time: '',
      project_content: '',
    };
  },
  methods: {
    getResumeDetail() {
      api.getResumeList().then((res) => {
        console.log("result->>", res.data.resumes);
        const result = res.data.resumes[0];

        this.field_company = result.field_company;
        this.field_job = result.field_job;
        this.field_time = result.field_time;
        this.field_content = result.field_content;
        this.project_name = result.project_name;
        this.project_time = result.project_time;
        this.project_content = result.project_content;
      });
    },
    edit(type) {
      if (type === 1) {
        this.editJob();
      } else if (type === 2) {
        this.editProject();
      }
    },
    editJob() {
      this.isEditJob = false;
      this.editJobText = "编辑";
      api.editResume({
        id: 1,
        field_company: this.field_company,
        field_time: this.field_time,
        field_job: this.field_job,
        field_content: this.field_content,
      });
    },
    editProject() {
      this.isEditProject = false;
      this.editProjectText = "编辑";
      api.editResume({
          id: 1,
          project_name: this.project_name,
          project_time: this.project_time,
          project_content: this.project_content,
      }).then((res) => { console.log(res); });
    },
    startEditPro() {
      this.isEditProject = true;
      this.editProjectText = "保存";
    },
    startEditJob() {
      this.isEditJob = true;
      this.editJobText = "保存";
    },

  },
  created() {
    this.getResumeDetail();
  },
};
</script>
<style lang='scss' scoped>
.detail-item-body {
  padding-left: 26px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 16px;

  .title {
    display: flex;
    font-size: 20px;
    align-items: center;

    h3 {
      border-left: 4px #000 solid;
      padding-left: 16px;
      color: #4d546d;
      margin: 10px 0;
    }

    .edit-btn {
      width: 100%;
      flex: 1;
      text-align: right;
      margin-right: 40px;

      .edit-btn-item {
        margin-right: 16px;
        background-color: #00000000;
        border: 0.5px solid #f5f5f5;
      }

      .edit-btn-item:hover {
        color: #1890ff;
      }
    }
  }

  input {
    height: 25px;
  }

  .job-item {
    color: rgba(102, 102, 102, 1);

    .company-info {
      width: 100%;
      text-align: start;
      padding-left: 16px;

      .company-title {
        margin-right: 50px;
        color: #4d546d;
        font-size: 16px;
      }
    }

    .sub-title {
      white-space: nowrap;
      text-align: left;
      font-family: Microsoft YaHei;
      font-style: normal;
      font-weight: normal;
      font-size: 16px;
      margin-left: 16px;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    ul {
      font-size: 14px;
    }

    li {
      line-height: 24px;
      margin: 5px 0;
      text-align: start;
    }

    li p::selection {
      background-color: gold;
      font-family: Microsoft YaHei;
      font-size: 14px;
    }
  }

  .bottom-line {
    width: 100%;
    height: 1px;
    margin-right: 100px;
    margin: 0 auto;
    background-color: #4d546d;
  }
}
</style>